<template>
  <section>
    <el-dialog
      :title="plan.id == 0 ? '添加方案' : '编辑方案' "
      :visible.sync="visible"
      :value="value"
      @close="close"
      width="450px"
    >
      <el-form
        :model="plan"
        :rules="rules"
        ref="planForm"
      >
        <el-form-item
          label="名称"
          :label-width="labelWidth"
          prop="name"
        >
          <el-input
            v-model="plan.name"
            auto-complete="off"
            maxlength="32"
            suffix-icon="fa fa-vcard"
            placeholder="请输入方案名称"
          />
        </el-form-item>
        <el-form-item
          label="方案类型"
          :label-width="labelWidth"
          prop="planType"
        >
          <el-select
            v-model="plan.planType"
            @change="planTypeChange"
            placeholder="请选择方案类型"
          >
            <el-option
              v-for="item in planTypes"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="用药时期"
          :label-width="labelWidth"
          prop="drugPeriod"
        >
          <el-input
            v-model="plan.drugPeriod"
            auto-complete="off"
            maxlength="32"
            suffix-icon="fa fa-calendar-minus-o"
            placeholder="请输入方案名称"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="cancle('planForm')"
        >取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit('planForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
    import {mapState} from "vuex";

    export default {
        name: "AddAndEdit",
        data() {
            return {
                visible: false,
                labelWidth: "100px",
                materiels: [],
                materielSorts: [],
                planTypes: [],
                plan: {
                    id: 0,
                    name: "",
                    planType: '',
                    drugPeriod: ''
                },
                rules: {
                    name: [{required: true, message: "请输入方案名称", trigger: "blur"}],
                    planType: [{required: true, message: "请选择方案类型", trigger: "blur"}],
                    drugPeriod: [{required: true, message: "请输入方案用药时期", trigger: "blur"}],
                }
            };
        },
        computed: {
            ...mapState({
                codebooks: state => state.codebooks.codebooks
            })
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler: function (val) {
                    this.visible = val.show;
                    this.labelWidth = val.formLabelWidth || "120px";
                    this.plan = {
                        id: val.plan.id
                    }
                    this.loadData();
                }
            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
            this.materielSorts = this.codebooks ? this.codebooks.materielSorts : [];
            this.planTypes = this.codebooks ? this.codebooks.planTypes : [];
        },
        methods: {
          close() {
            this.cancle('planForm');
          },
            cancle(formName) {
                this.visible = false;
                this.plan = {
                    id: 0
                };
              this.$refs[formName].clearValidate();
            },
            loadData() {
                if (!this.plan || !this.plan.id || this.plan.id <= 0) {
                    return;
                }
                this.$api.plan.detail(this.plan.id, result => {
                    this.plan = result.plan;
                    this.$delete(this.plan, "status");
                    this.plan.planType = this.plan.planType ? this.plan.planType.value : '';
                    this.plan.materielSort = this.plan.materielSort ? this.plan.materielSort.value : '';
                    this.planTypeChange(this.plan.planType);
                    this.plan.materielId = result.plan.materielId;
                });
            },
            planTypeChange(val) {
                this.$delete(this.plan, "materielId");
                let type = '';
                if (val == 'PLANT_PROTECTION') {
                    type = 'PESTICIDE';
                } else {
                    type = 'MANURE'
                }
                this.$api.materiel.all(type, result => {
                    this.materiels = result.materiels;
                })
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const callback = () => {
                            this.cancle(formName);
                        };
                        this.plan.id
                            ? this.$api.plan.update(this.plan, callback)
                            : this.$api.plan.save(this.plan, callback);
                    } else {
                        return false;
                    }
                });
            }
        },
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        show: false,
                        formLabelWidth: "150px",
                        plan: {
                            id: 0
                        }
                    };
                }
            }
        }
    };
</script>
